.caregory {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.clothespress-header {
  background-color: #d8eae2;
  display: flex;
  width: 100%;
  height: 340rpx;
  padding: 18% 0 0 0;
  flex-shrink: 0;
  position: relative;
  .caregory-box {
    display: flex;
    margin: 0 30rpx;
    width: 100%;
    flex-direction: column;
    height: 100%;
    .caregory-box-content {
      display: flex;
      gap: 20rpx;
      margin-top: auto;
      border-bottom: 1px solid rgb(146, 190, 171);
      height: 30%;
      width: 100%;
    }
  }
}
.clothes-category-box-content {
  height: 100rpx;
  display: flex;
  .clothes-right,
  .clothes-left {
    height: 100%;
    display: flex;
    display: flex;
  }
  .clothes-left {
    padding: 0 20px;

    color: #999;
    align-items: center;
  }
  .clothes-right {
    align-items: center;
    margin-left: auto;
    padding: 0 20rpx;
    .search-input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 28rpx;
      padding: 8rpx;
      margin-right: 10rpx;
      background: #fff;
      border-radius: 6rpx;
    }
    .search-btn {
      background: #92beab;
      border: none;
      color: #fff;
      font-size: 24rpx;
      padding: 0 16rpx;
      border-radius: 6rpx;
      margin-right: 8rpx;
    }
    .search-cancel {
      background: none;
      border: none;
      color: #92beab;
      font-size: 26rpx;
      padding: 0 10rpx;
    }
  }
}
.sings {
  cursor: pointer;
  padding: 0 10rpx;
  color: rgb(146, 190, 171);
}
.sings.active {
  color: rgb(92, 134, 115);
  font-weight: bold;
}

.clothes-category-box {
  height: calc(100vh - 360rpx);
  display: flex;
  flex-direction: column;
  .clothes-category {
    width: 100%;
    display: flex;
    .category-text {
      width: 25%;
      // width: 200rpx;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      background-color: #eeefef;
      .category-text-item {
        height: 71rpx;
        line-height: 71rpx;
        color: #333333;
        font-size: 40rpx;
        text-align: center;
        background-color: #eeefef;
        &:active {
          opacity: 0.8;
          transform: scale(0.98);
        }
      }
    }
  }
}

.category-detail {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.goods-list {
  display: flex;
  flex-direction: column;
  .goods-list-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    .goods-item {
      background: white;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

      .goods-image {
        width: 100%;
        height: 300rpx;
      }

      .goods-info {
        padding: 16rpx;
        .goods-name {
          font-size: 28rpx;
          text-align: center;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .goods-price {
          font-size: 32rpx;
          color: #e74c3c;
          font-weight: bold;
          margin-top: 8rpx;
          display: block;
        }
      }
    }
  }
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.bottom-title {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-bottom: 15%;
}
